
Vue.component('my-component', {
    // props:['table_data'],
    data () {
        return {
            ts: "",
            date: '',
            time: '',
            rolltimer: null,
            timer: null,
            timerTop: null,
            urls: "http://192.168.0.19:8011",
            tableData: [],
            ws: 'ws://192.168.0.19:8011/ws',
            loading: false
        }
    },
    methods: {
        tabRowClassName (row) {
            if (row.rowIndex % 2 == 0) {
                return 'row1'
            } else {
                return 'row2'
            }
        },
        ProgressBar () {
            // 创建一个 ECharts 实例
            var myChart = echarts.init(document.getElementById('progress-bar'));
            // 配置进度条的选项
            var option = {
                grid: {
                    left: '5%',
                    top: '0',
                    right: '0',
                    bottom: '0',
                    containLabel: true,
                    width: '93%'
                },
                xAxis: {
                    type: 'value',
                    splitLine: {
                        show: false
                    },
                    axisLabel: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                },
                yAxis: {
                    type: 'category',
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    axisLabel: {
                        color: 'black',
                        fontSize: 17
                    },
                },
                series: [{
                    name: '/' + 100,
                    type: 'bar',
                    barWidth: 18,
                    data: [100],
                    label: {
                        show: true,
                        //position    : 'middle',
                        offset: [20, 2],
                        formatter: '{c}{a}',
                        color: '#fff',
                        fontSize: 15
                    },
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(
                            1, 0, 0, 0,
                            [{
                                offset: 0,
                                color: '#A4DF4E'
                            }, //柱图渐变色
                            // {offset: 0.5, color: '#44C0C1'},                 //柱图渐变色
                            {
                                offset: 1,
                                color: '#5DC69D'
                            }, //柱图渐变色
                            ]
                        ),
                        barBorderRadius: 3,
                    },
                    zlevel: 1
                },
                {
                    name: '进度条背景',
                    type: 'bar',
                    barGap: '-100%',
                    barWidth: 18,
                    data: [100],
                    color: 'red', //柱条颜色
                    itemStyle: {
                        normal: {
                            barBorderRadius: 3,
                            borderColor: '#FEFEFE',
                        }
                    }
                }
                ]
            };

            // 使用刚指定的配置项和数据显示图表
            myChart.setOption(option);
        },
        createWebSocket () {
            try {
                // 创建Web Socket 连接
                socket = new WebSocket(this.ws);
                // 初始化事件
                this.initEventHandle(socket);
            } catch (e) {
                // 出错时重新连接
                console.log("error");
                this.reconnect(this.ws);
            }
        },
        initEventHandle (socket) {
            // 连接关闭时触发
            socket.onclose = () => {
                console.log("连接关闭");
                
                this.reconnect();
            };
            // 通信发生错误时触发
            socket.onerror = () => {
                // 重新创建长连接
                console.log("通信发生错误");
            };
            // 连接建立时触发
            socket.onopen = () => {
                console.log("建立连接成功");
            };
            // 客户端接收服务端数据时触发
            socket.onmessage = (msg) => {
                this.getalltask()
                // let data = JSON.parse(msg.data);
                // this.$emit("getSockData", data);
            };
        },
        reconnect () {
            if (this.lockReconnect) {
                return;
            }
            this.lockReconnect = true;

            // 没连接上会一直重连，设置延迟避免请求过多
            setTimeout(() => {
                this.lockReconnect = false;
                this.createWebSocket();
            }, 2000);
        },
        test (data) {
            // 给服务器发送一个字符串:
            socket.send(data);
        },
        dayzero (day) {
            if (day < 10) {
                return '0' + day
            }
            return day
        },
        displayDate () {
            let today = new Date();
            let year = today.getFullYear();
            let month = today.getMonth() + 1;
            let day = today.getDate();
            let weekDay = today.getDay();
            let hour = today.getHours();
            let minute = today.getMinutes();
            let second = today.getSeconds();
            let weekDays = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
            let date = year + "年" + this.dayzero(month) + "月" + this.dayzero(day) + "日" + weekDays[weekDay];
            let time = this.dayzero(hour) + ":" + this.dayzero(minute) + ":" + this.dayzero(second);
            this.date = date
            this.time = time
            // document.getElementById("dateDisplay").innerHTML = date;
        },
        startScroll (e) {
            this.tableScroll();
        },
        //停止滚动移入
        stopScroll () {
            window.clearInterval(this.rolltimer)
            window.clearTimeout(this.timer)
            window.clearInterval(this.timerTop)
        },
        tableScroll () {
            const table = this.$refs.rolltable
            const divData = table.bodyWrapper
            window.clearTimeout(this.timer)
            window.clearInterval(this.rolltimer)
            window.clearInterval(this.timerTop)
            this.rolltimer = window.setInterval(() => {
                if (divData.scrollTop == 0) {
                    window.clearInterval(this.rolltimer)
                    this.timerTop = window.setTimeout(() => {
                        window.clearTimeout(this.timerTop)
                        this.tableScroll();
                    }, 4000)
                }

                divData.scrollTop += 1
                if (divData.clientHeight + divData.scrollTop + 1 > divData.scrollHeight) {
                    window.clearInterval(this.rolltimer)
                    if (table.tableData.length > 5) {
                        window.clearInterval(this.rolltimer)
                        this.timer = window.setTimeout(() => {
                            divData.scrollTop = 0
                            window.clearTimeout(this.timer)
                            this.tableScroll();
                        }, 4000)

                    }
                }
            }, 40)
        },
        getalltask () {
            let vm = this;
            vm.loading = true
            $.ajax({
                url: this.urls + '/alltask',
                data: {
                    // action: "jQueryAjax"
                },
                type: "GET",
                success: function (data) {
                    if (data.length > 0) {
                        vm.loading = false
                        data.forEach(item => {
                            item.endTime =  item.endTime?dayjs(item.endTime).format('YYYY年MM月DD日'):item.remark
                            item.beginTime =item.beginTime? dayjs(item.beginTime).format('YYYY年MM月DD日'):"-"
                            if(item.isBegin && Number(item.remainingDuration) <=Number(item.duration)  ){
                                item.durationRatio = (Number(item.remainingDuration) / Number(item.duration) * 100)
                                if (item.durationRatio > 0) {
                                    item.durationRatio = 100 - item.durationRatio
                                }
                            }else{
                                item.durationRatio=0
                            }
                        });
                        vm.tableData = data
                    }
                },
                dataType: "json"
            });
        },
        //全屏f11
        fullScreen () {
            var element = document.documentElement;
            // 进入全屏模式
            if (element.requestFullscreen) {
                element.requestFullscreen();
            } else if (element.mozRequestFullScreen) { // Firefox
                element.mozRequestFullScreen();
            } else if (element.webkitRequestFullscreen) { // Chrome, Safari and Opera
                element.webkitRequestFullscreen();
            } else if (element.msRequestFullscreen) { // Internet Explorer and Edge
                element.msRequestFullscreen();
            }
            // document.getElementById('hideBtn').style = 'display:none'
        },
        //退出f11
        exitFullScreen () {
            if (document.exitFullScreen) {
                document.exitFullScreen();
            } else if (document.mozCancelFullScreen) {
                document.mozCancelFullScreen();
            } else if (document.webkitExitFullscreen) {
                document.webkitExitFullscreen();
            } else if (document.msExitFullscreen) {
                document.msExitFullscreen();
            }
        }
    },
    created () {

    },
    updata () {
        console.log(123)
    },
    mounted () {
        // 初始化web
        this.reconnect();
        // 自动滚动
        this.tableScroll()
        // 获取实时日期
        this.displayDate()
        setInterval(this.displayDate, 1000);
        // 请求数据
        this.getalltask()
        window.fullScreen = this.fullScreen
        window.exitFullScreen = this.exitFullScreen
    },
    //     <el-table-column label="" width="70" align="center" header-align="left">
    //     <template slot-scope="scope">
    //         <div class="pName_icon">
    //             <img src="./image/xh.png">
    //         </div>
    //     </template>
    // </el-table-column>
    template: `
    <div class="main_jd" id="main_jd">
    <div class="title_wh" @click="fullScreen">
        <div class="title_tp">
            <img src="./image/top_03.png" alt="">
        </div>
       
    </div>
    <div class="data_box">
        <div class="data_title">
            <img src="./image/logo.png">山西万鸿科技有限公司
        </div>
        <div class="dateTime">
            <div class="date-value">
                <span class="date">{{ date }}</span>
                <span class="time">{{ time }}</span>
            </div>
        </div>

    </div>

    <div class="wh_table">
        <el-table ref="rolltable" v-loading="loading"   element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"  element-loading-text="拼命加载中"
        :data="tableData" style="width: 100%" @mouseenter.native="stopScroll"
            @mouseleave.native="startScroll" :header-cell-style="{color:'#fff',background:'rgba(14, 251, 243,0.3)'}"
            :height="'90%'" :row-class-name="tabRowClassName">
    
            <el-table-column prop="pName" label="项目名称" width="120" align="left" header-align="left">
            </el-table-column>
            <el-table-column prop="pLeader" label="项目负责人" width="100" align="left" header-align="left">
            </el-table-column>
            <el-table-column prop="name" label="任务名称" align="left" header-align="left">
            </el-table-column>
            <el-table-column prop="leader" label="任务负责人" width="180" align="left" header-align="left">
            </el-table-column>
            <el-table-column prop="beginTime" label="实施开始日期" width="140" align="left" header-align="left">
            </el-table-column>
            <el-table-column prop="endTime" label="实施结束日期" width="140" align="left" header-align="left">
            </el-table-column>
            <el-table-column prop="duration" label="工期(日)占比" width="200" align="center" header-align="left">
                <template slot-scope="scope">
                    <div v-if="scope.row.durationRatio<0">
                        <div class="date_tip">
                            <span class="gq_wh">工期： {{scope.row.duration}}</span>
                            <span class="sygq_wh" style="color: #FF0101;">超过工期：
                                {{Math.abs(Number(scope.row.remainingDuration))}}</span>
                        </div>
                        <el-progress :stroke-width="5"
                            :percentage="scope.row.durationRatio<0?100:scope.row.durationRatio" color="#FF0101"
                            :show-text="false">
                        </el-progress>
                    </div>
                    <div v-else-if="scope.row.durationRatio>50">
                        <div class="date_tip">
                            <span class="gq_wh">工期： {{scope.row.duration}}</span>
                            <span class="sygq_wh" style="color:#FF6318">剩余工期：
                                {{scope.row.remainingDuration}}</span>
                        </div>
                        <el-progress class="progress_switch" :stroke-width="5" :percentage="scope.row.durationRatio" color="#FF6318"
                            :show-text="false">
                        </el-progress>
                    </div>
                    <div v-else-if="scope.row.durationRatio>=0 && scope.row.durationRatio<=50 ">
                        <div class="date_tip">
                            <span class="gq_wh">工期： {{scope.row.duration}}</span>
                            <span class="sygq_wh" style="color:#01DEB0">剩余工期：
                                {{scope.row.remainingDuration}}</span>
                        </div>
                        <el-progress class="progress_switch" :stroke-width="5" :percentage="scope.row.durationRatio" color="#01DEB0"
                            :show-text="false">
                        </el-progress>
                    </div>
                </template>
            </el-table-column>
        </el-table>
    </div>
</div>`
})